<template>
    <div class="x">
        <a-card title="debounceTime,去抖动">
            <a-button type="primary" ref="btn">节流防抖</a-button>
            <pre v-highlight>
                <code class="javascript">

    private btnThrottle() {
        const btn = this.$refs.btn as HTMLButtonElement;
        fromEvent(btn, 'click').pipe(debounceTime(1000)); // 避免按钮狂点，导致的交互bug，比如网络问题导致重复发送请求
    }
                 </code>
             </pre>
            <a-card-meta
                title="类似"
                description="auditTime,sampleTime,delay,throttletime"
            ></a-card-meta>
        </a-card>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { fromEvent, pipe, interval, of, merge } from 'rxjs';
import {
    concatMap,
    map,
    tap,
    switchMap,
    take,
    takeUntil,
    switchMapTo,
    debounceTime,
} from 'rxjs/operators';
@Component
export default class Drag extends Vue {
    private mounted() {
        const box = document.getElementById('box') as HTMLDivElement;
    }

    private btnThrottle() {
        const btn = this.$refs.btn as HTMLButtonElement;
        fromEvent(btn, 'click').pipe(debounceTime(1000)); // 避免按钮狂点，导致的交互bug，比如网络问题导致重复发送请求
    }
}
</script>
<style scoped>
.x {
    height: 70vh;
}
</style>